<template>
  <div class="home">
   <div class="headers">
      <div class="headers-main">
        <!-- 头部 -->
        <Header></Header>
        <!-- tab栏部分 -->
        <ly-tab class="ly-tab" v-model="selectedId" :items="items" :options="options" @change="ChangeTab"> </ly-tab>
      </div>
   </div>
    <!-- 主体部分 -->
    <section ref="wrapper">
      <div>
        <div v-for="(item, index) in newData" :key="index">
          <SwipersList
           v-if="item.type == 'swiperList'"
           :swiperList="item.data"
           ></SwipersList>
          <Icons 
          v-if="item.type == 'iconsList'"
          :iconsList="item.data"
          ></Icons>
          <Recommend 
          v-if="item.type == 'recommendList'"
          :recommendList="item.data"
          ></Recommend>
        

          <Ad 
          v-if="item.type == 'adList'"
          :adList="item.data"
          ></Ad>
          <Like 
          v-if="item.type == 'LikeList'"
          :LikeList="item.data"
          ></Like>
          
        </div>
      </div>
    </section>
    <!-- 底部tabbar -->
    <footer>
      <div class="footer">
        <Tabbar></Tabbar>
      </div>
    </footer>
  </div>
</template>

<script>
// 引入组件
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/components/home/Header.vue'
import SwipersList from '@/components/home/SwipersList.vue'
import Icons from '@/components/home/Icons.vue'
import Recommend from '@/components/home/Recommend.vue'
import Like from '@/components/home/Like.vue'
import Ad from '@/components/home/Ad.vue'
// 引入插件
import BetterScroll from 'better-scroll'
// import axios from 'axios'
// import { Indicator } from 'mint-ui';
import http from '@/common/api/request.js'

export default {
  name: "Home",
  data() {
    return {
      selectedId: 0,
      aBetterScroll: '',
      bBetterScroll: '',
      newData: [],
      items: [],
      options: {
        activeColor: "#b0352f",
        // 可在这里指定labelKey为你数据里文字对应的字段
      }
    }
  },
  components: {
    Tabbar,
    Header,
    SwipersList,
    Icons,
    Recommend,
    Like,
    Ad
  },
  methods: {
    async getData() {

      // http.$axios({
      //    url: '/api/index_list/0/data/1'
      // })

      // Indicator.open('加载中...');

       let res = await http.$axios({
         url: '/api/index_list/0/data/1'
      })
       this.items = Object.freeze(res.topBar)
       this.newData = Object.freeze(res.data)

      //  Indicator.close();
      
      // 当dom更新完再加载
       this.$nextTick(() => {
          this.aBetterScroll = new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
          click: true
        })
      })
      //  console.log(res)

    },
    ChangeTab(item, index) {
      this.addData(index)
    },
    async addData( index ) {
      let res = await http.$axios({url:'/api/index_list/'+index+'/data/1'})
      if(res.constructor != Array) {
        this.newData = res.data
      } else {
        this.newData = res
      }
      
      // 当dom更新完再加载
       this.$nextTick(() => {
          this.bBetterScrollnew  = BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true
        })
      })

    }
  },
  created() {
   this.getData()
  }
};
</script>
<style scoped>
.home {
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
  width: 100vw;
  height: 100vh;
}
.headers {
  width: 100%;
  height: 2.16rem;
}
.headers-main {
    position: fixed;
    left: 0;
    top: 0;
    
}
section {
  margin-top: .4rem;
  flex: 1;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
::v-deep .ly-tabbar {
    box-shadow: none;
    border-bottom: 0;
  }

</style>
